<div class="batch-wrapper">
  <div class="row">
    <div class="col-md-6">
      <h3>{{ 'BATCHES_PROGRESS_IN' | translate }}</h3>

      <div cam-widget-search
           cam-widget-search-total="ctrl.getBatchCount('runtime')"
           cam-widget-search-valid-searches="search.searches"
           cam-widget-search-translations="search.translations"
           cam-widget-search-types="search.types"
           cam-widget-search-operators="search.operators"
           cam-widget-search-storage-group="'BIP'"
           cam-widget-search-mode="filter"></div>

      <div cam-widget-loader
           loading-state="{{ ctrl.getLoadingState('runtime') }}"
           text-empty="{{ 'BATCHES_PROGRESS_NO_RUNNING' | translate }}">

        <table class="cam-table">
          <thead sortable-table-head
                 head-columns="runtimeHeadColumns"
                 on-sort-change="ctrl.onBatchSortChange('runtime', sortObj)"
                 default-sort="ctrl._batches.runtime.sorting">
          </thead>
          <tbody>
            <tr ng-repeat="batch in ctrl.getBatches('runtime')" ng-class="{selected: ctrl.isSelected(batch)}">
              <td class="uuid"><a ng-click="openDetails(batch.id, 'runtime')">{{batch.id}}</a></td>
              <td class="type">{{batch.type}}</td>
              <td class="user">{{ctrl.getFullName(batch.createUserId)}}</td>
              <td class="startTime">{{batch.startTime | camDate}}</td>
              <td class="failed">{{ ctrl.getProgressAbsolute(batch, 'failed') }}</td>
              <td>
                <uib-progress>
                  <div class="processed">{{ ctrl.getProgressRoundedPercentage(batch, 'success') }}%</div>
                  <uib-bar value="ctrl.getProgressPercentage(batch, 'success')"
                       type="success"
                       ng-if="ctrl.getProgressAbsolute(batch, 'success') > 0"
                       class="jobs jobs-success">
                  </uib-bar>
                </uib-progress>
              </td>
            </tr>
          </tbody>
        </table>
        <ul uib-pagination ng-if="ctrl.getBatchCount('runtime') > ctrl.getPageSize()"
                    class="pagination-sm"

                    page="ctrl.getCurrentPage('runtime')"
                    ng-model="ctrl._batches.runtime.currentPage"
                    ng-change="ctrl.updatePage('runtime')"

                    total-items="ctrl.getBatchCount('runtime')"
                    items-per-page="ctrl.getPageSize()"

                    max-size="7"
                    boundary-links="true"></ul>
      </div>

      <h3>{{ 'BATCHES_PROGRESS_END' | translate }}</h3>

      <div cam-widget-loader
           loading-state="{{ ctrl.getLoadingState('history') }}"
           text-empty="{{ 'BATCHES_PROGRESS_NO_FINISHED' | translate }}"
           ng-if="ctrl.shouldLoadHistory">

        <table class="cam-table">
          <thead sortable-table-head
                 head-columns="historyHeadColumns"
                 on-sort-change="ctrl.onBatchSortChange('history', sortObj)"
                 default-sort="ctrl._batches.history.sorting">
          </thead>
          <tbody>
            <tr ng-repeat="batch in ctrl.getBatches('history')" ng-class="{selected: ctrl.isSelected(batch)}">
              <td class="uuid"><a ng-click="openDetails(batch.id, 'history')">{{batch.id}}</a></td>
              <td>{{batch.type}}</td>
              <td>{{batch.startTime | camDate}}</td>
              <td>{{batch.endTime | camDate}}</td>
            </tr>
          </tbody>
        </table>
        <ul uib-pagination ng-if="ctrl.getBatchCount('history') > ctrl.getPageSize()"
                    class="pagination-sm"

                    page="ctrl.getCurrentPage('history')"
                    ng-model="ctrl._batches.history.currentPage"
                    ng-change="ctrl.updatePage('history')"

                    total-items="ctrl.getBatchCount('history')"
                    items-per-page="ctrl.getPageSize()"

                    max-size="7"
                    boundary-links="true"></ul>
      </div>
      <div class="history-loader" ng-if="!ctrl.shouldLoadHistory">
        <button class="btn btn-default" ng-click="ctrl.loadHistory()">{{'BATCHES_LOAD_ENDED' | translate}}</button>
      </div>
    </div>

    <div class="col-md-6">
      <div cam-widget-loader
           loading-state="{{ ctrl.getLoadingState('selection') }}"
           text-error="{{ctrl.getSelection()}}">
        <!-- The check below is needed, because you cannot combine ng-if with transclusion in the loader widget. Thanks Angular -->
        <div ng-if="ctrl.getLoadingState('selection') == 'LOADED'">
          <div class="row"
               ng-init="selection = ctrl.getSelection()">
            <h3 class="col-xs-8">
              <span ng-if="ctrl.getSelectionType() == 'history'">{{ 'BATCHES_PROGRESS_COMPLETED' | translate }}</span>
              <span ng-if="ctrl.getSelectionType() == 'runtime'">{{ 'BATCHES_PROGRESS_IN_PROGRESS' | translate }}</span> {{ 'BATCHES_PROGRESS_BATCH_DETAILS' | translate }}
            </h3>

            <div class="col-xs-4 text-right">
              <div class="btn-group batch-controls">
                <a ng-if="ctrl.getSelectionType() == 'runtime' && !ctrl.getSuspendedState()"
                   ng-click="ctrl.toggleSuspension()"
                   class="btn btn-default"
                   uib-tooltip="{{ 'BATCHES_PROGRESS_TOOLTIP_SUSPEND_BATCH' | translate }}">
                  <span class="glyphicon glyphicon-pause"></span>
                </a>

                <a ng-if="ctrl.getSelectionType() == 'runtime' && ctrl.getSuspendedState()"
                   ng-click="ctrl.toggleSuspension()"
                   class="btn btn-default"
                   uib-tooltip="{{ 'BATCHES_PROGRESS_TOOLTIP_ACTIVATE_BATCH' | translate }}">
                  <span class="glyphicon glyphicon-play"></span>
                </a>

                <a ng-if="ctrl.getSelectionType() == 'runtime' && ctrl.getJobs().length > 0"
                   class="btn btn-default action-button"
                   ng-click="ctrl.retryAll()"
                   uib-tooltip="{{ 'BATCHES_PROGRESS_TOOLTIP_INCREMENT_NUMBER' | translate }}">
                  <span class="glyphicon glyphicon-repeat"></span>
                </a>

                <a class="btn btn-danger action-button"
                   ng-click="ctrl.openDeleteModal()"
                   uib-tooltip="{{ 'BATCHES_PROGRESS_TOOLTIP_DELETE_BATCH' | translate }}">
                  <span class="glyphicon glyphicon-trash"></span>
                </a>
              </div>
            </div>
          </div>

          <table class="cam-table batch-details">
            <thead>
              <th>{{ 'BATCHES_PROGRESS_PROPERTY' | translate }}</th>
              <th>{{ 'BATCHES_PROGRESS_VALUE' | translate }}</th>
            </thead>
            <tbody>
              <tr ng-repeat="key in ctrl.sortingKeys"
                  ng-if="selection[key] && key !== 'failedJobs' || key === 'executionStartTime'"
                  ng-class="key">
                <td>{{key}}</td>
                <td ng-if="!key.endsWith('Time')">{{selection[key]}}
                  <span ng-if="key === 'remainingJobs' && selection.failedJobs"
                        class="failedJobs"
                        translate="BATCHES_PROGRESS_FAILED"
                        translate-values="{jobs: selection.failedJobs}"></span>
                </td>
                <td ng-if="key.endsWith('Time')">{{selection[key] | camDate}}</td>
              </tr>
            </tbody>
          </table>
          <div ng-if="ctrl.getSelectionType() == 'runtime'">
            <h3>{{ 'BATCHES_PROGRESS_FAIL_JOBS' | translate }}</h3>
            <div cam-widget-loader
                 loading-state="{{ ctrl.getLoadingState('jobs') }}"
                 text-empty="{{ 'BATCHES_PROGRESS_NO_FAILED_JOBS' | translate }}"
                 text-error="{{ ctrl.getJobs() }}">
            <table class="cam-table">
              <thead sortable-table-head
                     head-columns="jobHeadColumns"
                     on-sort-change="ctrl.onJobSortChange(sortObj)"
                     default-sort="ctrl._jobs.sorting">
              </thead>
              <tbody>
                <tr ng-repeat="job in ctrl.getJobs()">
                  <td class="uuid stack-trace">{{job.id}}</td>
                  <td>
                    {{job.exceptionMessage.substr(0, 120)}}…
                    <a ng-href="{{ctrl.getStacktraceUrl(job)}}"
                       target="_blank"
                       uib-tooltip="{{ 'BATCHES_PROGRESS_TOOLTIP_OPEN_STACK' | translate }}">{{ 'BATCHES_PROGRESS_FULL_STACK_TRACE' | translate }}</a>
                  </td>
                  <td>
                    <div class="btn-group btn-group-sm">
                      <a class="btn btn-default action-button"
                         ng-click="ctrl.retryJob(job)"
                         uib-tooltip="{{ 'BATCHES_PROGRESS_TOOLTIP_INCREMENT_RETRIES' | translate }}">
                        <span class="glyphicon glyphicon-repeat"></span>
                      </a>
                      <a class="btn btn-default action-button"
                         ng-click="ctrl.deleteJob(job)"
                         uib-tooltip="{{ 'BATCHES_PROGRESS_TOOLTIP_DELETE_JOB' | translate }}">
                        <span class="glyphicon glyphicon-trash"></span>
                      </a>
                      <a class="btn btn-default action-button"
                      ng-click="openLog(job)"
                      uib-tooltip="{{ 'BATCHES_PROGRESS_TOOLTIP_JOB_LOG' | translate }}">
                     <span class="glyphicon glyphicon-menu-hamburger""></span>
                   </a>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
            <ul uib-pagination ng-if="ctrl.getJobCount() > ctrl.getPageSize()"
                        class="pagination-sm"

                        page="ctrl.getCurrentPage('job')"
                        ng-model="ctrl._jobs.currentPage"
                        ng-change="ctrl.updatePage('job')"

                        total-items="ctrl.getJobCount()"
                        items-per-page="ctrl.getPageSize()"

                        max-size="7"
                        boundary-links="true"></ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
